<template>
  <div class="musicList">
    <div class="musicList-top">
      <div class="title">发现好歌单</div>
      <div class="more">查看更多</div>
    </div>
    <div class="mlist">
      <swiper
        :slides-per-view="3"
        :space-between="10"
        class="swiper-container"
      >
        <swiper-slide
          v-for="item in musicList"
          :key="item.id"
        >
          <router-link :to="{
            path:'/listview',
            query:{
              id:item.id
            }
          }">
            <img
              :src="item.picUrl"
              :alt="item.name"
            >
            <span class="name">{{item.name}}</span>
            <div class="count">
              <svg
                class="icon"
                aria-hidden="true"
              >
                <use xlink:href="#icon-bofang-"></use>
              </svg>
              <span>
                {{changeValue(item.playCount)}}
              </span>
            </div>
          </router-link>
        </swiper-slide>
      </swiper>
    </div>
  </div>
</template>

<script>
 import { Swiper, SwiperSlide } from 'swiper/vue';
 import 'swiper/swiper.less';
 import {reactive,onMounted, toRefs} from 'vue';
 import {getMusicList} from '@/api';
 export default{
   components:{
     Swiper,
     SwiperSlide,
   },
   setup() {
     let state = reactive({
       musicList:[]
     })

     onMounted(async() => {
      let result = await getMusicList();
      console.log(result);
      state.musicList = result.data.result;
     })

    function changeValue(num){
       let res = 0;
       if(num>=100000000){
         res = num/100000000;
         res = res.toFixed(2) + '亿';
       }else if(num>=10000){
         res = num/10000;
         res = res.toFixed(2) + '万';
       }
       return res;
     }

     return {
       changeValue,
       ...toRefs(state),
     }
   }
 }
</script>

<style lang="less" scoped>
.musicList {
  width: 7.5rem;
  padding: 0 0.4rem;
  .musicList-top {
    display: flex;
    justify-content: space-between;
    height: 1rem;
    align-items: center;
    .title {
      font-size: 0.4rem;
      font-weight: 900;
    }
    .more {
      border: 1px solid #ccc;
      border-radius: 0.2rem;
      font-size: 0.24rem;
      height: 0.5rem;
      width: 1.2rem;
      text-align: center;
      line-height: 0.5rem;
    }
  }
  .mlist {
    .swiper-container {
      width: 100%;
      height: 3rem;
      .swiper-slide {
        display: flex;
        flex-direction: column;
        position: relative;
        a {
          text-decoration: none;
          color: black;
        }
        img {
          width: 100%;
          height: auto;
          border-radius: 0.1rem;
        }
        .name {
          height: 0.6rem;
          width: 100%;
          font-size: 0.14rem;
          line-height: 0.3rem;
          overflow: hidden;
          text-overflow: ellipsis;
          display: -webkit-box;
          text-overflow: -o-ellipsis-lastline;
          -webkit-line-clamp: 2;
          line-clamp: 2;
          -webkit-box-orient: vertical;
        }
        .count {
          position: absolute;
          right: 0.1rem;
          top: 0.1rem;
          color: #ccc;
          font-size: 0.24rem;
          display: flex;
          align-items: center;
          .icon {
            fill: #ccc;
          }
        }
      }
    }
  }
}
</style>